<template>
    <uv-transition mode="fade" :show="show" :cell-child="cellChild">
        <view class="uv-tags-wrapper">
            <view
                class="uv-tags"
                :class="[
                    `uv-tags--${shape}`,
                    !plain && `uv-tags--${type}`,
                    plain && `uv-tags--${type}--plain`,
                    `uv-tags--${size}`,
                    `uv-tags--${size}--${closePlace}`,
                    plain && plainFill && `uv-tags--${type}--plain--fill`,
                ]"
                @tap.stop="clickHandler"
                :style="[
                    {
                        marginRight:
                            closable && closePlace == 'right-top' ? '10px' : 0,
                        marginTop:
                            closable && closePlace == 'right-top' ? '10px' : 0,
                    },
                    style,
                    $uv.addStyle(customStyle),
                ]"
            >
                <slot name="icon">
                    <view class="uv-tags__icon" v-if="icon">
                        <image
                            v-if="$uv.test.image(icon)"
                            :src="icon"
                            :style="[imgStyle]"
                        ></image>
                        <uv-icon
                            v-else
                            :color="elIconColor"
                            :name="icon"
                            :size="iconSize"
                        ></uv-icon>
                    </view>
                </slot>
                <text
                    class="uv-tags__text"
                    :style="[textColor]"
                    :class="[
                        `uv-tags__text--${type}`,
                        plain && `uv-tags__text--${type}--plain`,
                        `uv-tags__text--${size}`,
                    ]"
                >
                    {{ text }}
                </text>
                <view
                    class="uv-tags__close"
                    :class="[
                        `uv-tags__close--${size}`,
                        `uv-tags__close--${closePlace}`,
                    ]"
                    v-if="closable && closePlace == 'right'"
                    @tap.stop="closeHandler"
                    :style="{ backgroundColor: closeColor }"
                >
                    <uv-icon
                        name="close"
                        :size="closeSize"
                        color="#ffffff"
                    ></uv-icon>
                </view>
            </view>
            <view
                class="uv-tags__close"
                :class="[
                    `uv-tags__close--${size}`,
                    `uv-tags__close--${closePlace}`,
                ]"
                v-if="closable && closePlace == 'right-top'"
                @tap.stop="closeHandler"
                :style="{ backgroundColor: closeColor }"
            >
                <uv-icon
                    name="close"
                    :size="closeSize"
                    color="#ffffff"
                ></uv-icon>
            </view>
        </view>
    </uv-transition>
</template>

<script>
import { image } from '@/uni_modules/uv-ui-tools/libs/function/test.js'
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js'
/**
 * Tag 标签
 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
 * @tutorial https://www.uvui.cn/components/tag.html
 * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
 * @property {Boolean | String}	disabled	不可用（默认 false ）
 * @property {String}			size		标签的大小，large，medium，mini （默认 'medium' ）
 * @property {String}			shape		tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
 * @property {String | Number}	text		标签的文字内容
 * @property {String}			bgColor		背景颜色，默认为空字符串，即不处理
 * @property {String}			color		标签字体颜色，默认为空字符串，即不处理
 * @property {String}			borderColor	镂空形式标签的边框颜色
 * @property {String}			closeColor	关闭按钮图标的颜色（默认 #C6C7CB）
 * @property {String | Number}	name		点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
 * @property {Boolean}			plainFill	镂空时是否填充背景色（默认 false ）
 * @property {Boolean}			plain		是否镂空（默认 false ）
 * @property {Boolean}			closable	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
 * @property {Boolean}			show		标签显示与否（默认 true ）
 * @property {String}			icon		内置图标，或绝对路径的图片
 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值
 * @example <uv-tags text="标签" type="error" plain plainFill></uv-tags>
 */
export default {
    name: 'uv-tags',
    emits: ['click', 'close'],
    mixins: [mpMixin, mixin, props],
    computed: {
        style() {
            const style = {}
            if (this.bgColor) {
                style.backgroundColor = this.bgColor
            }
            if (this.color) {
                style.color = this.color
            }
            if (this.borderColor) {
                style.borderColor = this.borderColor
            }
            return style
        },
        // nvue下，文本颜色无法继承父元素
        textColor() {
            const style = {}
            if (this.color) {
                style.color = this.color
            }
            return style
        },
        imgStyle() {
            const width =
                this.size === 'large'
                    ? '17px'
                    : this.size === 'medium'
                      ? '15px'
                      : '13px'
            return {
                width,
                height: width,
            }
        },
        // 文本的样式
        closeSize() {
            const size =
                this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
            return size
        },
        // 图标大小
        iconSize() {
            const size =
                this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
            return size
        },
        // 图标颜色
        elIconColor() {
            return this.iconColor
                ? this.iconColor
                : this.plain
                  ? this.type
                  : '#ffffff'
        },
    },
    methods: {
        // 点击关闭按钮
        closeHandler() {
            this.$emit('close', this.name)
        },
        // 点击标签
        clickHandler() {
            this.$emit('click', this.name)
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-tags-wrapper {
    position: relative;
}

.uv-tags {
    @include flex;
    align-items: center;
    border-style: solid;

    &--circle {
        border-radius: 200rpx;
    }

    &--square {
        border-radius: 6rpx;
    }

    &__icon {
        margin-right: 8rpx;
    }

    &__text {
        &--mini {
            font-size: 24rpx;
            line-height: 24rpx;
        }

        &--medium {
            font-size: 26rpx;
            line-height: 26rpx;
        }

        &--large {
            font-size: 30rpx;
            line-height: 30rpx;
        }
    }

    &--mini {
        height: 44rpx;
        line-height: 44rpx;
        padding: 0 10rpx;
        &--right {
            padding-right: 4rpx;
        }
    }

    &--medium {
        height: 52rpx;
        line-height: 44rpx;
        padding: 0 20rpx;
        &--right {
            padding: 0 8rpx 0 16rpx;
        }
    }

    &--large {
        height: 64rpx;
        line-height: 64rpx;
        padding: 0 30rpx;
        &--right {
            padding: 0 8rpx 0 16rpx;
        }
    }

    &--primary {
        background-color: $uv-primary;
        border-width: 1px;
        border-color: $uv-primary;
    }

    &--primary--plain {
        border-width: 1px;
        border-color: $uv-primary;
    }

    &--primary--plain--fill {
        background-color: #ecf5ff;
    }

    &__text--primary {
        color: #ffffff;
    }

    &__text--primary--plain {
        color: $uv-primary;
    }

    &--error {
        background-color: $uv-error;
        border-width: 1px;
        border-color: $uv-error;
    }

    &--error--plain {
        border-width: 1px;
        border-color: $uv-error;
    }

    &--error--plain--fill {
        background-color: #fef0f0;
    }

    &__text--error {
        color: #ffffff;
    }

    &__text--error--plain {
        color: $uv-error;
    }

    &--warning {
        background-color: $uv-warning;
        border-width: 1px;
        border-color: $uv-warning;
    }

    &--warning--plain {
        border-width: 1px;
        border-color: $uv-warning;
    }

    &--warning--plain--fill {
        background-color: #fdf6ec;
    }

    &__text--warning {
        color: #ffffff;
    }

    &__text--warning--plain {
        color: $uv-warning;
    }

    &--success {
        background-color: $uv-success;
        border-width: 1px;
        border-color: $uv-success;
    }

    &--success--plain {
        border-width: 1px;
        border-color: $uv-success;
    }

    &--success--plain--fill {
        background-color: #f5fff0;
    }

    &__text--success {
        color: #ffffff;
    }

    &__text--success--plain {
        color: $uv-success;
    }

    &--info {
        background-color: $uv-info;
        border-width: 1px;
        border-color: $uv-info;
    }

    &--info--plain {
        border-width: 1px;
        border-color: $uv-info;
    }

    &--info--plain--fill {
        background-color: #f4f4f5;
    }

    &__text--info {
        color: #ffffff;
    }

    &__text--info--plain {
        color: $uv-info;
    }

    &__close {
        border-radius: 200rpx;
        background-color: #c6c7cb;
        @include flex(row);
        align-items: center;
        justify-content: center;
        transform: scale(0.6);
        &--right-top {
            position: absolute;
            z-index: 999;
            top: 10px;
            right: 10px;
            /* #ifndef APP-NVUE */
            transform: scale(0.6) translate(80%, -80%);
            /* #endif */
            /* #ifdef APP-NVUE */
            transform: scale(0.6) translate(50%, -50%);
            /* #endif */
        }
        &--mini {
            width: 36rpx;
            height: 36rpx;
        }

        &--medium {
            width: 44rpx;
            height: 44rpx;
        }

        &--large {
            width: 50rpx;
            height: 50rpx;
        }
    }
}
</style>
